<template>
    <div id="app" :style="backgroundDiv">
        <Layout-header />
        <Layout-menu />
        <router-view style="min-height: calc(100vh - 470px)" />
        <Layout-other />
        <Layout-footer />
        <!-- <div class="bgImg"></div> -->
    </div>
</template>

<script>
    import LayoutHeader from "@/layout/LayoutHeader";
    import LayoutMenu from "@/layout/LayoutMenu";
    import LayoutOther from "@/layout/LayoutOther";
    import LayoutFooter from "@/layout/LayoutFooter";
    export default {
        name: "App",
        components: {
            LayoutHeader,
            LayoutMenu,
            LayoutOther,
            LayoutFooter
        },
        data() {
            return {
                backgroundDiv: {
                    backgroundImage: 'url(' + require('@/assets/bottom.jpg') +
                        ')',
                    // backgroundRepeat : 'repeat-x !important',
                    backgroundSize: 'contain',
                },
            }
        }
    };
</script>
<style lang="scss">
    @import "./assets/common.css";

    /*引入公共样式*/
    body {
        padding: 0;
        margin: 0;
    }

    #id {
        min-height: 100vh;
    }
    .demo2-bg{
    background: url(//image.zhangxinxu.com/image/study/s/s256/mm1.jpg) no-repeat;
    background-size: cover;
    width: 500px;
    height: 300px;
    position: relative;
}
.demo2{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 500px;
    height: 300px;
    line-height: 50px;
    text-align: center;
    background:rgba(255,255,255,0.3);
}
</style>